<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>列表渲染</h1>
    <ul>
      <li v-for="item in arr">
        {{ item }}
      </li>
    </ul>
    <hr>
    
    <!-- item是支持结构的语法的 -->
    <!-- 还可以使用第二个参数index,表示item -->
    <p v-for="({name, num}, i) in arr2">
      {{ name }}的学号是{{ num }}, {{ i }}
    </p>

    <!-- 在js里面，forin循环对象的，forof是循环数组的 -->
    <!-- 在vue的v-for里面，这两个是完全通用的 -->
    <div v-for="item of arr3">
      <div v-for="val of item">{{ val }}</div>
    </div>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          arr: [1,2,3,4,5],
          arr2: [
            {
              num: 1,
              name: "zhangsan"
            },
            {
              num: 2,
              name: "lisi"
            }
          ],
          arr3: [
            [1,2,3,4],
            [5,6,7,8],
          ]
        }
      },
    }).mount("#app")

  </script>
</body>
</html>